<!-- index.vue - 布局设置抽屉 -->
<template>
  <!-- 🎯 Element Plus 抽屉 -->
  <el-drawer
    v-model="drawerVisible"
    title="布局设置"  
    direction="rtl"
    size="360px"
    class="theme-drawer"
  >
    <div class="drawer-content">
      
      <!-- 🎯 主题模式切换 -->
      <ThemeMode />
      
      <!-- 🎯 布局模式切换 -->
      <LayoutMode />
      
      <!-- 🎯 主题色设置 -->
      <ThemeColor />
      
      <!-- 🎯 布局功能设置 -->
      <LayoutFeatures />
      
    </div>
    
    <!-- 🎯 底部配置操作 -->
    <template #footer>
      <ConfigOperation />
    </template>
  </el-drawer>
</template>

<script setup>
import { useLayoutDrawer } from '@/composables/useLayoutDrawer.js'

// 🎯 导入所有模块
import ThemeMode from './modules/theme-mode.vue'
import LayoutMode from './modules/layout-mode.vue'
import ThemeColor from './modules/theme-color.vue'
import LayoutFeatures from './modules/layout-features.vue'
import ConfigOperation from './modules/config-operation.vue'

// 🎯 使用全局抽屉状态
const { drawerVisible } = useLayoutDrawer()
</script>

<style lang="scss" scoped>
// 🎯 抽屉内容
.drawer-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

// 🎯 抽屉项通用样式
:deep(.drawer-item) {
  .drawer-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin-bottom: 12px;
    
    .el-icon {
      font-size: 18px;
      color: var(--el-color-primary);
    }
  }
}
</style>